<template>
  <div class="container">
    <card title="产品管理">
      <button class="button is-primary" slot="right" @click="toLock">价格锁档</button>
      <button class="button is-primary" slot="right" @click="toSort">产品排序</button>
      <button class="button is-primary" slot="right" @click="showModal('new')">添加新产品</button>
      <div class="head-search">
        <div class="field has-addons">
          <div class="control">
            <input class="input" type="text" placeholder="请输入您想搜索的词" v-model="title"/>
          </div>
          <div class="control">
            <a class="button is-primary" @click="toSearch">搜索</a>
          </div>
        </div>
        <div class="recommend-box">
          <label>
            <input type="checkbox" v-model="is_recommend"/> 推荐位
          </label>
        </div>
      </div>
      <div class="asm-table">
        <div class="asm-tr">
          <div class="asm-th asm-grow-1">序号</div>
          <div class="asm-th">名字</div>
          <div class="asm-th">友盟ID</div>
          <div class="asm-th">状态</div>
          <div class="asm-th">操作</div>
        </div>
        <div class="asm-tr" v-if="isLoading">
          <loading></loading>
        </div>
        <div class="asm-tr asm-no-data" v-else-if="list.length < 1"></div>
        <div class="asm-tr" v-for="(item, index) in list" :key="index" v-else>
          <div class="asm-td asm-grow-1">{{getNo(index)}}</div>
          <div class="asm-td">{{item.title}}</div>
          <div class="asm-td">{{`ad_${item.app_store_id}`}}</div>
          <div class="asm-td">
            <div class="asm-tags">
              <span class="tag is-primary" v-if="item.is_ios">上线</span>
              <span class="tag is-light" v-else>下线</span>
              <span class="tag is-info" v-if="item.is_recommend">推荐位</span>
            </div>
          </div>
          <div class="asm-td">
            <div>
              <a @click="showModal('edit', item.id)">编辑</a>&nbsp;/&nbsp;
              <a @click="changeStatus(item)">{{item.is_ios ? '下线' : '上线'}}</a>
              <template v-if="item.is_ios">&nbsp;/&nbsp;<a @click="changeRecommend(item)">{{item.is_recommend ? '下推荐' : '上推荐'}}</a></template>
            </div>
          </div>
        </div>
      </div>
      <pagination
        v-show="total > 0 && !isLoading"
        :index="currentPage"
        :count="total"
        :loading="isLoading"
        @change="handleCurrentChange">
      </pagination>
    </card>
    <modal ref="modal" :visible="false">
      <pop :type="type" :appId="appId" @close="close"></pop>
    </modal>
    <modal ref="sort" :visible="false">
      <sort @close="closeSort"></sort>
    </modal>
  </div>
</template>

<script>
import { Modal } from '@/components/Modal'
import { Pagination } from '@/components/Common'
import Pop from './pop'
import Sort from './sort'
export default {
  name: 'app',
  components: {
    Modal,
    Pop,
    Sort,
    Pagination
  },
  data () {
    return {
      is_recommend: false,
      isLoading: false,
      type: 'new',
      appId: -1,
      title: '',
      currentPage: 1,
      pageSize: 15,
      param: {},
      result: {}
    }
  },
  watch: {
    is_recommend () {
      this.currentPage = 1
      this.getData()
    }
  },
  computed: {
    list () {
      return this.result.list || []
    },
    total () {
      return this.result.page_count || 1
    }
  },
  methods: {
    toLock () {
      this.$router.push('/lock')
    },
    toSort () {
      this.$refs.sort.open()
    },
    getNo (index) {
      return (this.currentPage - 1) * this.pageSize + index + 1
    },
    getData () {
      this.isLoading = true
      let param = {
        page: this.currentPage,
        per_page: this.pageSize,
        ...this.param
      }
      if (this.is_recommend) {
        param['is_recommend'] = true
      }
      this.$api.get('ads', param).then(req => {
        this.isLoading = false
        this.result = req
      })
    },
    showModal (type, appId) {
      this.type = type
      if (appId) this.appId = appId
      this.$refs.modal.open()
    },
    handleCurrentChange (index) {
      this.currentPage = index
      this.getData()
    },
    toSearch () {
      this.currentPage = 1
      this.param = {title: this.title}
      this.getData()
    },
    closeSort () {
      this.$refs.sort.close()
      this.currentPage = 1
      this.getData()
    },
    close () {
      this.$refs.modal.close()
      this.currentPage = 1
      this.getData()
    },
    changeStatus (item) { // 修改应用的上线状态
      this.$api.put(`ads/${item.id}/${item.is_ios ? 'off' : 'on'}`).then(() => {
        this.$openMessage({message: `${item.is_ios ? '下线' : '上线'}${item.title}成功`, type: 'success'})
        this.getData()
      })
    },
    changeRecommend (item) { // 修改应用的上线状态
      this.$api.put(`ads/${item.id}/${item.is_recommend ? 'off_recommend' : 'on_recommend'}`).then(() => {
        this.$openMessage({message: `${item.is_recommend ? '下推荐' : '上推荐'}${item.title}成功`, type: 'success'})
        this.getData()
      })
    }
  },
  created () {
    this.getData()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/scss/table.scss';
.head-search{
  display: flex;
  padding: 20px;
  box-shadow: 0 1px 0px rgba(10, 10, 10, 0.1);
  .input{
    width: 200px;
  }
}
.asm-tags{
  display: flex;
  & > span:not(:last-child) {
    margin-right: 5px;
  }
}
.field:not(:last-child) {
  margin-bottom: 0;
}
.recommend-box{
  margin-left: 20px;
  display: flex;
  align-items: center;
}
</style>

